<template>
  <div class="index">
    <van-tabs v-model="active">
      <van-tab
        v-for="channel in channelsList"
        :key="channel.id"
        :title="channel.name"
      >
        <article-list
          :channel="channel"
          @close-popup="closePopup"
        ></article-list>
      </van-tab>
    </van-tabs>
    <van-popup v-model="show" :style="{ width: '80%' }">
      <more-action
        @uninterested="hUninterested"
        @report="hReport"
        ref="refMoreAction"
      ></more-action>
    </van-popup>
    <!-- 频道列表 开关 通过定位 通过它打开频道管理的弹层 -->
    <div class="bar-btn" @click="isShowChannelEdit = true" v-if="$store.getters.isLogin">
      <van-icon name="wap-nav" />
    </div>
    <van-action-sheet v-model="isShowChannelEdit" title="频道管理">
      <channel-edit
        :channels="channelsList"
        @update-cur-channel="hUpdateCurChannel"
        :curIndex="active"
        @fixed-cur-channel="hFixedCurChannel"
      ></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
import { getChannels } from '@/api/channel.js'
import { disLike, reportArticle } from '@/api/article.js'
import ArticleList from './articleList.vue'
import MoreAction from './moreAction.vue'
import eventBus from '@/utils/eventBus.js'
import ChannelEdit from './channelEdit.vue'

export default {
  name: 'home',
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  data () {
    return {
      active: 0, // 标签下标 0-推荐
      channelsList: [], // 频道列表
      show: false, // 是否显示弹出层
      articleId: '', // articleList 子组件传来的 id值
      isShowChannelEdit: false // 动作面板(频道管理)
    }
  },
  methods: {
    // 加载频道列表
    async loadGetChannels () {
      const res = await getChannels()
      // console.log(res)
      this.channelsList = res.data.data.channels
    },
    // 显示弹出层
    closePopup (articleId) {
      // 1. 显示弹层
      this.show = true
      // 2. 在每次打开前，在moreAction中的isReport为false
      //    第一次打开的时候，会生成undefined，因为在第一次点击前，moreAction组件没有加载；
      //    所以也就没有isReport
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = false
      }
      // 3. 保存articleId 子组件传来的 id值
      this.articleId = articleId
    },
    // moerAction 中点击了不感兴趣
    async hUninterested () {
      // 1. 调用接口
      try {
        await disLike(this.articleId)
        // console.log(res)
        // 2. 退出弹层
        this.show = false
        // 3. 把点击的文章删除掉： 本地删除（不是从后端删除）
        //    home.vue需要通知多个article去本地删除，所以是一个事件总线eventBus
        eventBus.$emit('delete-article', this.articleId)

        this.$toast.success('操作成功')
      } catch (err) {
        this.$toast.fail('操作失败')
      }
    },
    // moreAction 子组件中点击了举报操作
    async hReport (typeId) {
      try {
        // 1. 调用接口，传文章编号，举报类型
        //    typeId: 子组件传来的举报类型
        //    articleId: 在点击时获取到的文章id
        await reportArticle(this.articleId, typeId)
        // 2. 关闭弹层
        this.show = false
        // 3. 通知删除文章 articleList 子组件
        eventBus.$emit('delete-article', this.articleId)

        this.$toast.success('操作成功')
      } catch (err) {
        this.$toast.fail('操作失败')
      }
    },
    // 更新父组件中的频道列表的选择状态
    hUpdateCurChannel (idx) {
      // 1. 切换频道
      this.active = idx
      // 2. 关闭动作面板
      this.isShowChannelEdit = false
    },
    // 修复删除bug 接受channelEdit传来的新下标
    hFixedCurChannel (curIndex) {
      this.active = curIndex
    }
  },
  created () {
    this.loadGetChannels()
  }
}
</script>

<style lang="less" scoped>
.bar-btn {
  position: fixed;
  right: 5px;
  top: 57px;
  display: flex;
  align-items: center;
  background-color: #fff;
  opacity: 0.8;
  z-index: 1;
  .van-icon-wap-nav {
    font-size: 20px;
  }
}
</style>
